﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage1.master" AutoEventWireup="true"
    CodeFile="zone.aspx.cs" Inherits="zone" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <title>江城影世界</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // Tabs
            $('#tabs').tabs();
        });
    </script>
    <script type="text/javascript">
        $(function () {
            $("#menu li").each(function (index) {
                $(this).click(function () {
                    $("#menu li.tabFocus").removeClass("tabFocus");
                    $(this).addClass("tabFocus");
                    $("#content ul:eq(" + index + ")").show().siblings().hide();
                });
            });
        });
  
    </script>
    <style type="text/css">
        /*====================*/
        /*=== Body Styles ===*/
        /*====================*/
        #content
        {
            width: 960px;
            height: 900px;
            border: solid 1px #9a7bf3;
            margin-left: 160px;
            background-color: #fff;
        }
        #tabs
        {
            width: 960px;
            height: 840px;
            padding: 0 0 0 0;
        }
        #tcontent
        {
            width: 960px;
            height: 300px;
            margin-left: -20px;
            border-bottom: dashed 2px #3f7e8a;
        }
        #infor
        {
            position: relative;
            top: -200px;
            left: 380px;
        }
        #change_infor
        {
            position: relative;
            top: 50px;
            left: 80px;
        }
        #change_infor #submit
        {
            position: relative;
            top: 30px;
            left: 580px;
        }
        #write_comment
        {
            position: relative;
            top: -200px;
            left: 260px;
        }
        #write_comment #save
        {
            position: relative;
            top: 30px;
            left: -80px;
        }
        #tabs-2 #bcontent ul li
        {
            list-style-type: none;
            width: 960px;
            height: 80px;
            margin-left: -20px;
            border-bottom: dashed 1px #ac46e8;
        }
        #tabs-2 #bcontent ul li p
        {
            padding: 5px 24px;
        }
        #user
        {
            width: 290px;
            height: 200px;
            margin-left: -20px;
        }
        #user img
        {
            margin-left: 70px;
            margin-top: 35px;
            border: solid 1px #9a7bf3;
        }
        #user p
        {
            position: relative;
            top: 20px;
            left: 105px;
        }
        #tabs-1 ul li
        {
            margin-left: 70px;
            margin-top: 30px;
            list-style-type: none;
            height: 20px;
        }
        #new_save
        {
            position: relative;
            top: -200px;
            left: 400px;
            height: 280px;
        }
        #new_save img
        {
            margin: 24px 0 0 24px;
            border: solid 1px lightblue;
        }
        #new_save p
        {
            position: relative;
            top: -240px;
            left: 200px;
            margin: 18px 0 0 24px;
        }
        #page
        {
            position: relative;
            top: 40px;
            left: 750px;
        }
        #tabs-3 #page
        {
            position: relative;
            top: 240px;
            left: 385px;
        }
        #page li
        {
            float: left;
            width: 19px;
            height: 25px;
            padding-left: 5px;
            list-style-type: none;
        }
        #page li a
        {
            color: #2b2b2b;
        }
        #last li
        {
            width: 19px;
            height: 20px;
            margin-top: 5px;
            background: url(images/last.png) no-repeat;
            background-position: 0 0;
            background-size: 20px 40px;
        }
        #last li:hover
        {
            background-position: 0 -20px;
        }
        #next li
        {
            width: 19px;
            height: 20px;
            margin-top: 5px;
            background: url(images/next.png) no-repeat;
            background-position: 0 0;
            background-size: 20px 40px;
        }
        #next li:hover
        {
            background-position: 0 -20px;
        }
        .mov_li
        {
            list-style-type: none;
            display: inline-block;
            vertical-align: top;
            float: left;
            width: 155px;
            height: 190px;
            margin-left: 24px;
            margin-top: 24px;
        }
        .mov img
        {
            border: solid 1px #9a7bf3;
        }
        .mov_li a:hover
        {
            text-decoration: underline;
        }
        .caption
        {
            position: relative;
            top: 5px;
            left: -20px;
        }
        .caption p
        {
            text-align: center;
            color: #3d7f9e;
        }
        #no_save
        {
            position: relative;
            top: 0;
            left: -20px;
        }
        .caption #dislike
        {
            position: relative;
            top: -25px;
            left: 60px;
            margin-left: 30px;
        }
        #dislike p
        {
            height: 25px;
            background: url(images/dislike.png) no-repeat;
            backgrpund-postion: 0 0;
            background-size: 25px 50px;
        }
        #dislike p:hover
        {
            background-position: 0 -25px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="content">
        <img src="images/zone_ban.png"></img>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">个人资料</a></li>
                <li><a href="#tabs-2">我的影评</a></li>
                <li><a href="#tabs-3">电影收藏</a></li>
            </ul>
            <div id="tabs-1">
                <div id="tcontent">
                    <div id="user">
                        <img src="images/man.gif"></img>
                    </div>
                    <div id="infor">
                        <ul>
                            <li>用户名：<asp:Label ID="lbUser" runat="server"></asp:Label>
                            </li>
                            <li>性别：<asp:Label ID="lbSex" runat="server"></asp:Label>
                            </li>
                            <li>年龄：<asp:Label ID="lbAge" runat="server"></asp:Label>
                            </li>
                            <li>邮箱：<asp:Label ID="lbEmail" runat="server"></asp:Label>
                            </li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div id="bcontent">
                    <ul id="change_infor">
                        <li>性&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;&nbsp;&nbsp;男<input type="radio" id="Male" runat="server"
                            checked="true" name="sex" value="male" />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" id="Female" runat="server" name="sex"
                                value="female" /></li>
                        <li>年&nbsp;&nbsp;&nbsp;龄:<input type="text" id="Age" runat="server" name="age" /></li>
                        <li>邮&nbsp;&nbsp;&nbsp;箱:<input type="text" id="Email" runat="server" name="e-mail" /><asp:RegularExpressionValidator
                            ID="RegularExpressionValidator1" runat="server" ControlToValidate="Email" ErrorMessage="邮箱格式不正确！"
                            ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
                        </li>
                        <li>旧密码:<input type="password" runat="server" id="OldPassword" name="password" /><asp:CustomValidator
                            ID="CustomValidator1" runat="server" ControlToValidate="OldPassword" ErrorMessage="密码错误！"
                            ForeColor="Red"></asp:CustomValidator>
                        </li>
                        <li>密&nbsp;&nbsp;&nbsp;码:<input type="password" id="Password" runat="server" name="password" /><asp:CustomValidator
                            ID="CustomValidator2" runat="server" ControlToValidate="Password" ErrorMessage="请输入新密码！"
                            ForeColor="Red"></asp:CustomValidator>
                        </li>
                        <li>确认密码:<input type="password" runat="server" id="password1" name="password" /><asp:CompareValidator
                            ID="CompareValidator1" runat="server" ControlToCompare="Password" ControlToValidate="password1"
                            ErrorMessage="两次输入密码不一致！" ForeColor="Red"></asp:CompareValidator>
                        </li>
                        <li id="submit">
                            <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="保存" UseSubmitBehavior="False" />
                        </li>
                    </ul>
                </div>
            </div>
            <div id="tabs-2">
                <div id="tcontent">
                    <div id="user">
                        <img src="images/man.gif"></img>
                        <p>
                            用户名
                            
                        </p>
                    </div>
                    <!--           -->
                    <!--           -->
                    <!--           -->
                </div>
                <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                <div id="bcontent">
                    <ul>
                        <li>
                            <p>
                                评论:<%#Eval("comment") %></p>
                        </li>

                    </ul>
                </div>
                </ItemTemplate>
                </asp:Repeater>
                <div id="page">
                    <ul>
                        <div id="last">
                            <li><a href=""></a></li>
                        </div>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <div id="next">
                            <li><a href=""></a></li>
                        </div>
                    </ul>
                </div>
            </div>
            <div id="tabs-3">
                <div id="tcontent">
                    <div id="user">
                        <img src="images/man.gif"></img>
                        <p>
                            用户名</p>
                    </div>
                    <div id="new_save">
                        <a href="">
                            <img src="images/maidou.jpg"></img></a>
                        <p>
                            电影名:<a href=""></a></p>
                        <p>
                            导演:</p>
                        <p>
                            演员：</p>
                        <p>
                            片长：</p>
                        <p>
                            简介：</p>
                    </div>
                </div>
                <div id="bcontent">
                    <ul id="mov_ul">
                        <div class="mov_li">
                            <div class="mov">
                                <li><a href="">
                                    <img src="images/mov1.jpg"></img></a></li>
                            </div>
                            <div class="caption">
                                <a href="">
                                    <p>
                                        mov1</p>
                                </a>
                                <p id="no_save">
                                    取消收藏</p>
                                <div id="dislike">
                                    <p>
                                        <a href=""></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mov_li">
                            <div class="mov">
                                <li><a href="">
                                    <img src="images/mov1.jpg"></img></a></li>
                            </div>
                            <div class="caption">
                                <a href="">
                                    <p>
                                        mov1</p>
                                </a>
                                <p id="no_save">
                                    取消收藏</p>
                                <div id="dislike">
                                    <p>
                                        <a href=""></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mov_li">
                            <div class="mov">
                                <li><a href="">
                                    <img src="images/mov1.jpg"></img></a></li>
                            </div>
                            <div class="caption">
                                <a href="">
                                    <p>
                                        mov1</p>
                                </a>
                                <p id="no_save">
                                    取消收藏</p>
                                <div id="dislike">
                                    <p>
                                        <a href=""></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mov_li">
                            <div class="mov">
                                <li><a href="">
                                    <img src="images/mov1.jpg"></img></a></li>
                            </div>
                            <div class="caption">
                                <a href="">
                                    <p>
                                        mov1</p>
                                </a>
                                <p id="no_save">
                                    取消收藏</p>
                                <div id="dislike">
                                    <p>
                                        <a href=""></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mov_li">
                            <div class="mov">
                                <li><a href="">
                                    <img src="images/mov1.jpg"></img></a></li>
                            </div>
                            <div class="caption">
                                <a href="">
                                    <p>
                                        mov1</p>
                                </a>
                                <p id="no_save">
                                    取消收藏</p>
                                <div id="dislike">
                                    <p>
                                        <a href=""></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mov_li">
                            <div class="mov">
                                <li><a href="">
                                    <img src="images/mov1.jpg"></img></a></li>
                            </div>
                            <div class="caption">
                                <a href="">
                                    <p>
                                        mov1</p>
                                </a>
                                <p id="no_save">
                                    取消收藏</p>
                                <div id="dislike">
                                    <p>
                                        <a href=""></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mov_li">
                            <div class="mov">
                                <li><a href="">
                                    <img src="images/mov1.jpg"></img></a></li>
                            </div>
                            <div class="caption">
                                <a href="">
                                    <p>
                                        mov1</p>
                                </a>
                                <p id="no_save">
                                    取消收藏</p>
                                <div id="dislike">
                                    <p>
                                        <a href=""></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </ul>
                </div>
                <div id="page">
                    <ul>
                        <div id="last">
                            <li><a href=""></a></li>
                        </div>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <div id="next">
                            <li><a href=""></a></li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
